<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>{$praiseContent['title']}</title>

<css href="/Public/css/maint_eat.css?v=4" />
<css href="/Public/css/font.css" />
<link rel="stylesheet" href="/Public/css/gyBase.css">
<link href="/Public/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<script  src="/Public/js/jquery-1.7.1.min.js" ></script>
<script src="/Public/js/bootstrap/bootstrap.min.js"></script>

<script src="/Public/js/banner.js" type="text/javascript"></script>

<script  src="/Public/js/jquery.masonry.min.js" ></script>

<script  src="/Public/js/commoneat.js" ></script>
<script  src="/Public/js/loading.js" ></script>

<script>
	var g_endTimeStamp = "{$praiseContent['enddate']}";
</script>
<link rel="stylesheet" href="/Public/css/praise_modify.css">
<script src="/Public/js/praise_modify.js" ></script>

<script type="text/javascript">
$(function() {
	var container = $('#ulWaterfall');
	var loading = $('#imloading');
	var searching = 0;
	loading.data("on", true);
	var load = function( sqlJson, top, left ) {
		if (sqlJson.size <= 0) {
			loading.text('只有这么多了！');
		} else {
			var html = "";
			for (var i in sqlJson.datas) {
			    var votes = Number(sqlJson.datas[i].share);
				html +="<li class='item'><a href='/?m=wap&c=praiseeat&a=fetch_one&praise={$praise}&id="+sqlJson.datas[i].id+"'>"+"<img class='pic' src='"+sqlJson.datas[i].pic+"' data-href='"+sqlJson.datas[i].pic+"'></a>";//}
				html +="<div class='divNum'></div>";
				html +="<span class='spanNum'>"+"编号："+ sqlJson.datas[i].grade + "号</span>";
				html +="<div class='liintro'>"+sqlJson.datas[i].show_name+"</div>";
				html += "<p style='float: right;padding-right: 15px;color:#ff5e45'>" + votes + "</p><div class='lihot'></div></li>";
			}
			var time = setTimeout(function() {
				var style = { opacity: 1 };
				if( top && left ){
				}
				var newElems = $(html).css( {opacity: 0} ).appendTo(container);

				newElems.find( "img.pic" ).each( function(){
				} );
				newElems.imagesLoaded(function() {
					newElems.animate( style, 10 );
					container.masonry('appended', newElems, true);
					loading.data("on", true).fadeOut();
					clearTimeout(time);
				});
			}, 10)
		}
	};

	var search = function( options ){
		searching = 1;
		$.ajax({
			url: "/?m=wap&c=praiseItem&a=search",
			data: options,
			type: "POST",
			success: function( result ){
				$( "#waterfull" ).html( "<ul id='ulWaterfall' class='masonry' style='position:relative'></ul>" );
				container = $('#ulWaterfall');
				common.waterfall();
				$(window).trigger( "scrollTop" );
				load( result, 1, 1 );
			},
			error: function(){
			}
		});
	};

	$(".searchBtn").unbind( "click").bind( "click", function(){
            var str = $( "#searchKeyword" ).val();
            if( !$.trim( str ) ) return;
		    search( {praise: "{$praise}", keyword: str} );
	});

	$(".searchDel").unbind( "click").bind( "click", function(){
		$("#searchKeyword").val("");
	});

	common.show.fetchJson( { praise: "{$praise}"}, load );

	$(window).scroll(function() {
		if (!loading.data("on")) return;
		var itemNum = $('#waterfull').find('.item').length;
		var itemArr = [];
		itemArr[0] = $('#waterfull').find('.item').eq(itemNum - 1).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		itemArr[1] = $('#waterfull').find('.item').eq(itemNum - 2).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		itemArr[2] = $('#waterfull').find('.item').eq(itemNum - 3).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		var maxTop = Math.max.apply(null, itemArr);
		if (maxTop < $(window).height() + $(document).scrollTop() && !searching ) {
			loading.data("on", false).fadeIn();
			setTimeout( function(){
				common.show.fetchJson( { priase: "{$praise}" }, load );
			}, 800 );
		}
	});
});

</script>
<style type="text/css">
	.item img {
		padding-top: 30px;
	}
	input{
		background:none;
		border:none;
	}
</style>
</head>	
<body style="background-color:#eee;">
<include file="Tpl/header" />
<div id="wrapper">
<div id="main">
	<div class="activeTitles">
		<ul class="ulactTitle"> <!-- TODO: not good, cause html rendering uneffective, should use real tab -->
			<?php
				if(empty($info)){
					echo '<li class="on" style="width: 100%"><span>人气榜</span></li>';
				}else{
					$link = json_decode($info, true);
					if(empty($link['desc'])){
						echo '<li class="on" style="width: 100%"><span>人气榜</span></li>';
					}else{
						echo '<li class="on" ><span>人气榜</span></li><li><a href="';
						switch($praise){
							case 95:
								echo 'https://zj.zjol.com.cn/news.html?id=832639';
								break;
							case 96:
								echo 'https://zj.zjol.com.cn/news/851092.html';
							case 121:
								echo '/Wap/praiseeat/index?type=info&praise=' . $praise;
						}
						echo '"><span class="bor0">活动说明</span></a></li>';
					}
				}
			?>
        </ul>
    </div>
	<div class="alert alert-warning" style="display: none">
		<a href="#" class="close" onclick="remove_alert();">
			&times;
		</a>
		<strong>您已提交美食，待审核</strong>
	</div>
    <div class="searchBox">
        <div class="search">
            <!--<span class="icon iconfont icon-sousuo"></span>
            <input class="txt"  placeholder="输入参赛编号或者作者姓名进行搜索" id="searchBtn"/> -->

				<input class="txt"  placeholder="输入名称进行搜索" id="searchKeyword"/>

			<span class="icon iconfont searchDel"></span>
        </div> <input type="button" class="searchBtn" value="">
	</div>
	<p class="pintro"></p>
		<div class="content">
			<div class="waterFallBox" id="waterfull">
				<ul id="ulWaterfall">
				</ul>
			</div>
			<div id="imloading" class="loading">加载中</div>
		</div>
</div>
</div>
<div class="modal fade" style="margin-top:50%;" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×
				</button>
				<h4 class="modal-title" id="myModalLabel">
					填写手机号码有机会获得精美奖品
				</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form" id="connect" >
					<input type="hidden" name="id" value="" id="id">
					<div class="form-group">
						<label class="col-sm-2 control-label">手机号码</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="telephone" id="telephone" placeholder="请输入手机号码">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"
						data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary" onclick="update_data();">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="upLoadimage"></div>
<div class="commentTextarea">
	<h1><span class="spanClose"></span>上传图片</h1>
	<textarea class="commentText" placeholder='发现花园之美，为家乡点赞（最多33个字）' maxlength="33"></textarea>
	<div class="commentbtn"><input type="button" value="发送" class="sendBtn"/></div>
	<div class="divimage"><img class="pic upload_pic" src="/Public/images/blankimage.jpg"><div class="imageplus"><span>上传照片</span></div></div>
	<input class="upload" name="file" accept="images/*" type="file" style="display:none"/>
</div>
<script type="text/javascript">
    function remove_alert(){
        $(".alert").css("display", "none");
    }
    $(function() {
        var picdata = '';
        $(".divimage").click(function () {
            if(window.__wxjs_is_wkwebview){
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original','compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        for(var i=0; i<localIds.length;i++){
							wx.getLocalImgData({
								localId: localIds[i],
								success:function(res){
									var localData = res.localData;
                                    $(".upload_pic").attr("src", localData);
                                    picdata = localData;
								},
								fail: function(res){
									alert(res);
								}
							});
                        }
                    }
                })
			}else{
                $(".upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
                $(".upload").on("change",function(){
                    var file = this.files[0];
                    if(!/image\/\w+/.test(file.type)){
                        alert("请确保文件为图像类型");
                        return false;
                    }
                    var reader=new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function() {
                        $(".upload_pic").attr("src", this.result);
                        picdata = this.result;
                    };
                    $(".imageplus").css("display","none");
                });
			}
        });
        $(".spanClose").click(function(){
            $(".commentTextarea").css('display', 'none');
            $(".commentText").val('');
            picdata = '';
            $(".upload_pic").attr("src", "/Public/images/blankimage.jpg");
        });
        $(".upLoadimage").click(function(){
            $(".commentTextarea").css('display', 'block');
        });
        $(".commentText").bind('input propertychange', function() {
            var curLength=$(".commentText").val().length;
            if(curLength>35){
                var text=$(".commentText").val().substr(0,32);
                $(".commentText").val(text);
            }
        });
        $(".sendBtn").click(function(){
            if(picdata == ''){
                alert("请分享您的美食图片");
			}
			$.ajax({
				type: 'post',
				dataType:'json',
				async:false,
				url:"/Wap/Praiseeat/item_add?praise=" + "{$praise}",
				data:{
				    praise: "{$praise}",
					name: $(".commentText").val(),
					pic: picdata
				},
				success:function(res){
                    $(".alert").css("display", "block");
                    $(".spanClose").click();
                    if(res > 0){
                        $("#id").val(res);
                        $("#myModal").modal("show");
					}
				}
			});
		});
    });
    function update_data(){
        if($("#telephone").val() == ""){
            $("#myModal").modal("hide");
            $("#id").val("");
            $("#telephone").val("");
		}else{
            $.ajax({
				type:"post",
				data:{
				    id:$("#id").val(),
					telephone:$("#telephone").val()
				},
				dataType:"json",
				async: false,
				url:"/Wap/Praiseeat/update_item_connect?praise=" + "{$praise}",
				success:function(res){

				}
            });
            $("#myModal").modal("hide");
            $("#id").val("");
            $("#telephone").val("");
		}

	}
</script>
<include file="Tpl/load" />
<include file="Tpl/footer" praise="{$praise}"/>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId: '{$wxuser["appid"]}', // 必填，公众号的唯一标识
		timestamp: "{$timestamp}", // 必填，生成签名的时间戳
		nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
		signature: '{$wxSha1}',// 必填，签名，见附录1
		jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline', 'chooseImage', 'getLocalImgData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	wx.error(function(res){
		console.log(res);
		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
	});
	wx.ready( function( e ){
		wx.onMenuShareAppMessage({
			title: "{$share_title}",
			desc: "{$share_desc}",
			link: location.protocol + "//" + window.location.hostname + "/index.php?m=wap&c=praiseeat&a=index&praise={$praise}",
			imgUrl: "{$share_pic}",
			type: 'link',
			dataUrl: '',
			success: function () {
			},
			complete: function () {
			},
			cancel: function () {
			},
			fail: function(){
			},
			trigger: function(){
			}
		});
		wx.onMenuShareTimeline({
			title: "{$share_title}",
			link: location.protocol + "//" + window.location.hostname + "/index.php?m=wap&c=praiseeat&a=index&praise={$praise}",
			imgUrl: "{$share_pic}",
			success: function () {
			},
			complete: function () {
			},
			cancel: function () {
			},
			fail: function(){
			},
			trigger: function(){
			}
		});
	});
</script>
<script src="/Public/js/jquery.lazyload.js"></script>
</body>

</html>